<template>
  <view class="box-bg">
    <uni-nav-bar 
      shadow 
      color="#F7F7F7" 
      left-icon="left" 
      backgroundColor="#3485FD" 
      height="65px" 
      title="订单支付" 
      @clickLeft="back" 
    />
  </view>  
  <view class="container">
    <view class="success-content">
      <view class="circle">
        <image src="/static/lsh01.png" mode="scaleToFill"></image>
      </view>
      <text class="success-text">支付成功</text>
      <text class="amount">{{ amount }}元</text>
      <text class="appointment-number">预约编号: {{ appointmentNumber }}</text>
      <button class="back-home" @click="goBackHome">返回首页</button>
      <button class="order-detail" @click="goToOrderDetail">订单详情</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const amount = ref('39.90');
const appointmentNumber = ref('324252536363634');

// 处理导航逻辑
const goBackHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

const back = () => {
  uni.navigateBack(); // 优化：使用返回上一页逻辑（保留原方法名兼容）
};

const goToOrderDetail = () => {
  uni.navigateTo({
    url: `/pages/order-detail/index?appointmentNumber=${appointmentNumber.value}`
  });
};
</script>
<style>
	     .box-bg{
	     	position: fixed;
	     	width: 100%;
	     	top: 0;
	     	z-index: 1000;
	     }
		 /* 正确写法 */
		 .container {
		   background-color: #f7f7f7;
		   padding-top: var(--status-bar-height); /* 变量名使用连字符 */
		   margin-top: 150rpx;
		 }
		 .header {
			display: flex;        /* 启用 Flex 布局 */
			justify-content: center;  /* 水平居中 */
			align-items: center;      /* 垂直居中 */
		   	background-color: #007aff;
			color: white;
			height: 80rpx;
		 }
		 .success-content {
		   background-color: white;
		   padding: 50rpx;
		   border-radius: 10rpx;
		   margin: 30rpx;
		   /* 新增代码 */
		   display: flex;
		   flex-direction: column;
		   align-items: center; /* 确保所有子元素水平居中 */
		 }
		 .circle {
		   width: 120rpx;
		   height: 120rpx;
		   background-color: #007aff;
		   border-radius: 50%;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		 }
		 
		 .circle image {
		   width: 120rpx;
		   height: 120rpx;
		   object-fit: cover;  
		 }
		 .success-text {
		   font-size: 32rpx;
		   margin-bottom: 20rpx;
		 }
		 .amount {
		   font-size: 48rpx;
		   margin-bottom: 30rpx;
		 }
		 .appointment-number {
		   font-size: 28rpx;
		   margin-bottom: 40rpx;
		 }
		 .back-home {
		   background-color: #007aff;
		   color: white;
		   border-radius: 50rpx;
		   margin-bottom: 20rpx;
		   width: 100%;
		   height: 80rpx;
		 }
		 .order-detail {
		   background-color: #e5e5e5;
		   color: #666;
		   border-radius: 50rpx;
		   width: 100%;
		   height: 80rpx;
		 }
		   
</style>
